<template>
	<view class="content">
		<!--  -->
		<u-tabs style="width: 100%;" :list="tabList" lineWidth="40px" lineColor="#f56c6c" lineHeight="10"
		 itemStyle="width: 33%; padding: 0; margin: 0; height: 40px;"
		></u-tabs>

		<view class="weekInfo">
			<u--text size="30" bold text="请选择球场开放日"></u--text>
			<view class="space-between" style="padding: 30rpx 0;">
				<view :style="{'background-color': item.check ? '#4A43EC' : '#ffffff',
				'border': item.check ? 'none' : '1px solid #E5E5E5',
				'color':item.check ? 'white' : 'black',
				'box-sizing': 'border-box'}" class="weekBox" v-for="(item,index) in weekList"
					@click="checkWeek(index)">
					<text>{{item.name}}</text>
				</view>
			</view>
		</view>

		<!-- 开放时间 -->
		<view class="weekInfo">

			<view class="fromBox space-between">
				<view style="display: flex;align-items: center;">
					<u--text size="30" text="球场开放时间"></u--text>
				</view>
				<view class="flex">
					<u--text size="25" text="8:00-22:00"></u--text>
					<u-icon name="arrow-right"></u-icon>
				</view>
			</view>

			<view class="fromBox space-between">
				<view style="display: flex;align-items: center;">
					<u--text size="30" text="放场时间间隔"></u--text>
				</view>
				<view style="display: flex;align-items: center;">
					<u--text size="25" text="2个小时"></u--text>
					<u-icon name="arrow-right"></u-icon>
				</view>
			</view>

			<view class="fromBox space-between">
				<view style="display: flex;align-items: center;">
					<u--text size="30" text="价格（每小时）"></u--text>
				</view>
				<view style="display: flex;align-items: center;">
					<u--input :customStyle="{
						'padding':'20rpx 10rpx',
						'border':'none'
					}" placeholder="请输入内容" border="bottom" v-model="price"></u--input>
				</view>
			</view>


		</view>

		<!-- 特殊价格设置 -->

		<view class="weekInfo">
			<view>
				<u--text bold size="30" text="特俗价格设置"></u--text>
			</view>
			<view v-for="(item,index) in setPirceNum">
				<view class="space-between padding15-0">
					<text>设置{{index+1}}</text>
					<u-icon name="minus-circle" size="40"></u-icon>
				</view>

				<u--form labelPosition="left" ref="uForm">

					<u-form-item label="日期" prop="userInfo.name" ref="item1" class="padding10-40" labelWidth="100">
						<u--input :customStyle="{
						'background':' #F7F7F7',
						'padding':'20rpx 10rpx',
						'border-radius': '10px',
						'border':'none'
					}" :suffixIconStyle="{
						'font-size':'30rpx',
						'font-weight': 'bold'
						}" shape="circle" suffixIcon="arrow-down" v-model="price"></u--input>
					</u-form-item>
					<u-form-item label="时间" prop="userInfo.name" ref="item1" class="padding10-40" labelWidth="100">
						<u--input :customStyle="{
						'background':' #F7F7F7',
						'padding':'20rpx 10rpx',
						'border-radius': '10px',
						'border':'none'
					}" :suffixIconStyle="{
						'font-size':'30rpx',
						'font-weight': 'bold'
						}" shape="circle" suffixIcon="arrow-down" v-model="price"></u--input>
					</u-form-item>
					<u-form-item label="价格" prop="userInfo.name" ref="item1" class="padding10-40" labelWidth="100">
						<u--input :customStyle="{
						'background':' #F7F7F7',
						'padding':'20rpx 10rpx',
						'border-radius': '10px',
						'border':'none'
					}"  shape="circle"  v-model="price"></u--input>
					</u-form-item>
				</u--form>
				
				<u-divider v-if="setPirceNum >1 && index+1 != setPirceNum" ></u-divider>
			</view>
			<view @click="setPirceNum++" class="setBox" style="background: #E8EDFF;box-shadow: none;">
				<text style="font-weight: bold;margin-right: 10rpx;font-size: 40rpx;">+</text>
				<text> 新增</text>
			</view>
		</view>

		<!--  -->
		
		<view class="weekInfo">
			<view>
				<u--text bold size="30" text="打折设置"></u--text>
			</view>
			<view v-for="(item,index) in setDiscountNum">
				<view class="space-between padding15-0">
					<text>设置{{index+1}}</text>
					<u-icon name="minus-circle" size="40"></u-icon>
				</view>
		
				<u--form labelPosition="left" ref="uForm">
		
					<u-form-item label="日期" prop="userInfo.name" ref="item1" class="padding10-40" labelWidth="100">
						<u--input :customStyle="{
						'background':' #F7F7F7',
						'padding':'20rpx 10rpx',
						'border-radius': '10px',
						'border':'none'
					}" :suffixIconStyle="{
						'font-size':'30rpx',
						'font-weight': 'bold'
						}" shape="circle" suffixIcon="arrow-down" v-model="price"></u--input>
					</u-form-item>
					<u-form-item @click="timeShow = true" label="时间" prop="userInfo.name" ref="item1" class="padding10-40" labelWidth="100">
						<u--input :customStyle="{
						'background':' #F7F7F7',
						'padding':'20rpx 10rpx',
						'border-radius': '10px',
						'border':'none'
					}" :suffixIconStyle="{
						'font-size':'30rpx',
						'font-weight': 'bold'
						}" shape="circle" suffixIcon="arrow-down" v-model="price"></u--input>
					</u-form-item>
					<u-form-item label="场次" prop="userInfo.name" ref="item1" class="padding10-40" labelWidth="100">
						<u--input :customStyle="{
						'background':' #F7F7F7',
						'padding':'20rpx 10rpx',
						'border-radius': '10px',
						'border':'none'
					}" :suffixIconStyle="{
						'font-size':'30rpx',
						'font-weight': 'bold'
						}" shape="circle" suffixIcon="arrow-down" v-model="price"></u--input>
					</u-form-item>
				</u--form>
				
				<u-divider v-if="setDiscountNum >1 && index+1 != setDiscountNum" ></u-divider>
			</view>
			<view @click="setDiscountNum++" class="setBox" style="background: #E8EDFF;box-shadow: none;">
				<text style="font-weight: bold;margin-right: 10rpx;font-size: 40rpx;">+</text>
				<text> 新增</text>
			</view>
		</view>
		
		<!-- 冻结场次 -->
		
		<view class="weekInfo">
			<view>
				<u--text bold size="30" text="特俗价格设置"></u--text>
			</view>
			<view v-for="(item,index) in setDiscountNum">
				<view class="space-between padding15-0">
					<text>设置{{index+1}}</text>
					<u-icon name="minus-circle" size="40"></u-icon>
				</view>
		
				<u--form labelPosition="left" ref="uForm">
		
					<u-form-item label="日期" prop="userInfo.name" ref="item1" class="padding10-40" labelWidth="100">
						<u--input :customStyle="{
						'background':' #F7F7F7',
						'padding':'20rpx 10rpx',
						'border-radius': '10px',
						'border':'none'
					}" :suffixIconStyle="{
						'font-size':'30rpx',
						'font-weight': 'bold'
						}" shape="circle" suffixIcon="arrow-down" v-model="price"></u--input>
					</u-form-item>
					<u-form-item label="时间" prop="userInfo.name" ref="item1" class="padding10-40" labelWidth="100">
						<u--input :customStyle="{
						'background':' #F7F7F7',
						'padding':'20rpx 10rpx',
						'border-radius': '10px',
						'border':'none'
					}" :suffixIconStyle="{
						'font-size':'30rpx',
						'font-weight': 'bold'
						}" shape="circle" suffixIcon="arrow-down" v-model="price"></u--input>
					</u-form-item>
					<u-form-item label="场次" prop="userInfo.name" ref="item1" class="padding10-40" labelWidth="100">
						<u--input :customStyle="{
						'background':' #F7F7F7',
						'padding':'20rpx 10rpx',
						'border-radius': '10px',
						'border':'none'
					}" :suffixIconStyle="{
						'font-size':'30rpx',
						'font-weight': 'bold'
						}" shape="circle" suffixIcon="arrow-down" v-model="price"></u--input>
					</u-form-item>
				</u--form>
				
				<u-divider v-if="setDiscountNum >1 && index+1 != setDiscountNum" ></u-divider>
			</view>
			<view @click="setDiscountNum++" class="setBox" style="background: #E8EDFF;box-shadow: none;">
				<text style="font-weight: bold;margin-right: 10rpx;font-size: 40rpx;">+</text>
				<text> 新增</text>
			</view>
		</view>
		
		<!-- 时间选择 -->
		<u-popup round="30" mode="bottom" :show="timeShow" @close="timeClose" @open="open">
			<view>
				<u--text lineHeight="80" bold size="30" text="选择时间"></u--text>
				<view class="timeInfo">
					<view class="timeBox" v-for="item in timeList">
						<u--text size="23" :text="item"></u--text>
					</view>
				</view>
			</view>
		</u-popup>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabList: [{
					name: '5人场',
				}, {
					name: '7人场',
				}, {
					name: '11人场'
				}, {
					name: '11人场'
				}],
				weekList: [{
					name: '一',
					value: '1',
					check: false
				}, {
					name: '二',
					value: '2',
					check: false
				}, {
					name: '三',
					value: '3',
					check: false
				}, {
					name: '四',
					value: '4',
					check: false
				}, {
					name: '五',
					value: '5',
					check: false
				}, {
					name: '六',
					value: '6',
					check: false
				}, {
					name: '七',
					value: '7',
					check: false
				}],
				setPirceNum: 1, //特俗价格设置
				setDiscountNum: 1, //特殊折扣设置
				setFreezeNum: 1, //冻结设置
				timeShow:false, //时间
				timeList:[
					'8:00-10:00',
					'10:00-12:00',
					'12:00-14:00',
					'14:00-16:00',
					'16:00-18:00',
					'18:00-20:00',
					'20:00-22:00',
				]
			}
		},
		methods: {
			checkWeek(i) {
				this.weekList.map((item, index) => {
					if (i === index) {
						item.check = !item.check
					}
				})
			},
				
			timeClose(){
				this.timeShow =false
			}
		}
	}
</script>

<style lang="scss">
	/deep/ .u-tabs__wrapper__nav {
	  // display: flex;
	  // justify-content: space-around;
	}
	
	/deep/ .u-tabs__wrapper__nav__line{
		// width: 100rpx;
	}
	.content{
		width: 100%;
		height: 100%;
		padding-bottom: 100rpx;
	}
	.weekInfo {
		padding: 20rpx 30rpx;
		width: 82%;
		height: auto;
		margin: 3% auto;
		border-radius: 20px;
		opacity: 1;
		background: #FEFEFF;
		box-shadow: 0px 10px 20px 0px rgba(90, 90, 90, 0.1);
	}

	.weekBox {
		border-radius: 8px;
		padding: 20rpx 23rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border: 1px solid #E5E5E5;
		box-sizing: border-box;
	}

	.fromBox {
		padding: 0rpx 20rpx;
		width: 98%;
		height: 60px;
		border-radius: 15px;
		opacity: 1;
		background: #FFFFFF;
		box-sizing: border-box;
		background: #F7F7F7;
		margin: 3% auto;
	}

	.setBox {
		width: 100%;
		height: 100rpx;
		border-radius: 12px;
		opacity: 1;
		/* 主色 */
		/* 样式描述：足球小程序 */
		background: #4A43EC;
		box-shadow: 0px 10px 35px 0px rgba(111, 126, 201, 0.25);
		margin: 5% auto 0 auto;
		color: white;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #4A43EC;
	}
	.timeInfo{
		display: grid;
		grid-template-columns: repeat(3,1fr);
		justify-content: space-around;
		gap: 10rpx;
	}
	.timeBox{
		width: 106px;
		height: 40px;
		border-radius: 6px;
		opacity: 1;
		background: #F3F4F5;
		box-sizing: border-box;
		border: 0.5px solid rgba(0, 0, 0, 0.05);
		z-index: 1;
		display: flex;
		justify-content: center;
		align-items: center;
	}
</style>